<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.ultraq.net.nz/web/thymeleaf/layout ">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>区域信息</title>
  <link rel="stylesheet"
        th:href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback}"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}"
        href="../../static/plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}"
        href="../../static/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}"
        href="../../static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}"
        href="../../static/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" th:href="@{/plugins/datatables-select/css/select.bootstrap4.min.css}"
        href="../../static/plugins/datatables-select/css/select.bootstrap4.min.css">
  <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}"
        href="../../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <link rel="stylesheet" th:href="@{/plugins/toastr/toastr.min.css}"
        href="../../static/plugins/toastr/toastr.min.css">
  <link rel="stylesheet" th:href="@{/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css}"
        href="../../static/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">

  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}"
        href="../../static/dist/css/adminlte.min.css">
</head>
<body class="wrapper">
<div>
  <input type="hidden" th:value="${msg}" id="msg">
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <!-- /.card-header -->
<!--            <div class="card-header">-->
<!--              <div class="btn-group">-->
<!--                <button type="button" class="btn btn-outline-primary">添加</button>-->
<!--                <button type="button" class="btn btn-outline-danger">删除选中行</button>-->
<!--              </div>-->
<!--            </div>-->
            <form th:action="@{/base/area/deleteAreas}" id="listForm">
              <div class="card-body">
                <table id="table" class="table table-hover table-sm">
                  <thead>
                  <tr>
                    <th>
                      <div class="icheck-primary">
                        <input type="checkbox" id="checkall">
                        <label for="checkall"></label>
                      </div>
                    </th>
                    <th>区域名称</th>
                    <th>备注信息</th>
                    <th>创建时间</th>
                    <th>编辑</th>
                    <th>删除</th>
                  </tr>
                  </thead>
                  <tbody th:if="${areas ne 'null'}">
                  <tr th:each="area:${areas}">
                    <td>
                      <div class="icheck-primary">
                        <input name="idList" th:value="${area.id}" type="checkbox" th:id="${area.name}+${area.id}">
                        <label th:for="${area.name}+${area.id}"></label>
                      </div>
                    </td>
                    <td>
                    <span th:if="${area.parent eq 0}">
                      <i class="expandable-table-caret fas fa-caret-down fa-fw"></i>
                    </span>
                      <span th:class="${area.parent ne 0 ?'ml-5':''}" th:text="${area.name}">厦门</span>
                    </td>
                    <td th:text="${area.remark}">无</td>
                    <td th:text="${area.createTime}">2021.5.2</td>
                    <td>
                      <a type="button" class="btn btn-block btn-outline-primary btn-sm" data-toggle="modal" data-target="#edit1"
                         th:onclick="edit_customer([[${area.id}]],[[${area.name}]],[[${area.remark}]])"><i class="fas fa-edit"></i></a>
                    </td>
                    <td>
                      <a onclick="return confirm('确认删除吗')" th:href="@{/base/area/delete?(id=${area.id})}" type="button"
                         class="btn btn-block btn-outline-danger btn-sm" ><i class="fas fa-times"></i></a>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<!--添加信息的弹出层-->
<div id="edit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <!--                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
        <h5 class="modal-title">
          <i class="fas fa-edit"></i>
          <span id="lblAddTitle">添加区域</span>
        </h5>
      </div>
      <form class="form-horizontal form-bordered form-row-stripe" id="ffAdd" th:action="@{/base/area/add}" method="post" data-toggle="validator" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-4">区域名称</label>
                <div class="col-md-10">
                  <input id="Name" name="Name" type="text" class="form-control" placeholder="区域名称..." />
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-4">备注信息</label>
                <div class="col-md-10">
                  <textarea id="Remark" name="Remark" class="form-control" placeholder="备注信息..."></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-outline-primary">确定</button>
          <button type="button" class="btn btn-outline-danger" data-dismiss="modal">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!--修改信息的弹出层-->
<div id="edit1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <!--                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
        <h5 class="modal-title">
          <i class="fas fa-edit"></i>
          <span id="lblAddTitle">编辑区域</span>
        </h5>
      </div>
      <form class="form-horizontal form-bordered form-row-stripe" id="ffEdit" th:action="@{/base/area/update}" method="post" data-toggle="validator" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-4">区域名称</label>
                <div class="col-md-10">
                  <input id="Name1" name="Name" type="text" class="form-control" placeholder="区域名称..." />
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label col-md-4">备注信息</label>
                <div class="col-md-10">
                  <textarea id="Remark1" name="Remark" class="form-control" placeholder="备注信息..."></textarea>
                </div>
              </div>
            </div>
            <div>
              <input id="Tid1" name="id" type="text" class="form-control" style="display: none" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-outline-primary">确定</button>
          <button type="button" class="btn btn-outline-danger" data-dismiss="modal">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!--删除操作的确认弹窗-->
<!--<div id="delete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--  <div class="modal-dialog">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header bg-warning">-->
<!--        &lt;!&ndash;                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>&ndash;&gt;-->
<!--        <h5 class="modal-title">-->
<!--          <i class="fas fa-exclamation-circle"></i>-->
<!--          <span id="lblDeleteTitle">操作提醒</span>-->
<!--        </h5>-->
<!--      </div>-->
<!--      <form class="form-horizontal form-bordered form-row-stripe" id="ffDelete" action="" data-toggle="validator" enctype="multipart/form-data">-->
<!--        <div class="modal-body">-->
<!--          <div class="row">-->
<!--            <div class="col-md-12">-->
<!--              <div class="form-group text-center">-->
<!--                <i class="fa fa-exclamation-circle fa-5x" style="color: #ff3200"></i><br><br>-->
<!--                <h4><strong>您确认删除选定的内容吗</strong></h4>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="modal-footer">-->
<!--          <button type="submit" class="btn">取消</button>-->
<!--          <button type="button" class="btn btn-outline-danger" data-dismiss="modal">确认删除</button>-->
<!--        </div>-->
<!--      </form>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->


<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"
        src="../../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"
        src="../../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables  & Plugins -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"
        src="../../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"
        src="../../static/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"
        src="../../static/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"
        src="../../static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script th:src="@{/plugins/datatables-buttons/js/dataTables.buttons.min.js}"
        src="../../static/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.bootstrap4.min.js}"
        src="../../static/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script th:src="@{/plugins/datatables-select/js/select.bootstrap4.min.js}"
        src="../../static/plugins/datatables-select/js/select.bootstrap4.min.js"></script>
<script th:src="@{/plugins/jszip/jszip.min.js}"
        src="../../static/plugins/jszip/jszip.min.js"></script>
<script th:src="@{/plugins/pdfmake/pdfmake.min.js}"
        src="../../static/plugins/pdfmake/pdfmake.min.js"></script>
<script th:src="@{/plugins/pdfmake/vfs_fonts.js}"
        src="../../static/plugins/pdfmake/vfs_fonts.js"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.html5.min.js}"
        src="../../static/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.print.min.js}"
        src="../../static/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.colVis.min.js}"
        src="../../static/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script th:src="@{/plugins/datatables-select/js/dataTables.select.min.js}"
        src="../../static/plugins/datatables-select/js/dataTables.select.min.js"></script>
<script th:src="@{/plugins/toastr/toastr.min.js}"
        src="../../static/plugins/toastr/toastr.min.js"></script>
<script th:src="@{/plugins/sweetalert2/sweetalert2.min.js}"
        src="../../static/plugins/sweetalert2/sweetalert2.min.js"></script>
<script th:src="@{/plugins/jquery-validation/jquery.validate.min.js}"
        src="../../static/plugins/jquery-validation/jquery.validate.min.js"></script>
<script th:src="@{/plugins/jquery-validation/additional-methods.min.js}"
        src="../../static/plugins/jquery-validation/additional-methods.min.js"></script>
<script th:src="@{/plugins/jquery-validation/localization/messages_zh.min.js}"
        src="../../static/plugins/jquery-validation/localization/messages_zh.min.js"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"
        src="../../static/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"
        src="../../static/dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
  $(function () {
    $('#table').DataTable({
      'responsive': true,
      'lengthChange': false,
      'autoWidth': false,
      'iDisplayLength': 10, //默认10行
      'sPaginationType': 'full_numbers', //分页样式
      "language": {
        "sSearch": "搜索区域:",
        "sProcessing": "正在加载中......",
        "sLengthMenu": "每页显示 _MENU_ 条记录",
        "sZeroRecords": "对不起，查询不到相关数据！",
        "sEmptyTable": "表中无数据存在！",
        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
        "oPaginate": {
          "sFirst": "首页",
          "sPrevious": "上一页",
          "sNext": "下一页",
          "sLast": "末页"
        }
      },
      'ordering': false,
      'buttons': [
        {
          extend: 'excel',
          text: '<i class="fa fa-download" aria-hidden="true"> 导出 Excel</i>',
          className: 'btn btn-success btn-sm'
        }, {
          extend: 'print',
          text: '<i class="fa fa-print" aria-hidden="true"> 打印</i>',
          className: 'btn btn-default btn-sm'
        }, {
          extend: '',
          text: '<i class="fa fa-plus-square" aria-hidden="true"> 添加</i>',
          className: 'btn btn-info btn-sm',
          action: function () {
            $('#edit').modal('show');
          }
        }, {
          extend: '',
          text: '<i class="fa fa-trash" aria-hidden="true"> 删除选中行</i>',
          className: 'btn btn-danger btn-sm',
          action: function () {
            deleteAreas();
          }
        }
      ]
    }).buttons().container().appendTo('#table_wrapper .col-md-6:eq(0)')

    var checkall = $("#checkall");
    var items = $("input[name='idList']");
    checkall.click(function () {
      if ($(this).prop("checked")) {
        items.each(function () {
          $(this).prop('checked', true);
        })
      } else {
        items.each(function () {
          $(this).prop('checked', false);
        })
      }
      items.click(function () {
        checkall.prop("checked", items.length == $("input[name='idList']:checked").length ? true : false);
      })
    })
    var msg = $("#msg").val();
    var Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
    if (msg) {
      if (!msg.endsWith("成功！")) {
        toastr.error(msg)
      } else {
        toastr.success(msg)
      }
    }
    $('#ffAdd').validate({
      rules: {
        Name: {
          required: true,
          minlength: 2,
          maxlength:8
        }
      },

      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }
    });
    $('#ffEdit').validate({
      rules: {
        Name: {
          required: true,
          minlength: 2,
          maxlength:8
        }
      },

      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }
    });

  })

  function deleteAreas() {
    if (!confirm('确认删除选中行吗？'))
      return false;
    $("#listForm").submit();
  }
  function edit_customer(tid,tname,tremark) {
    $("#Tid1").val(tid);
    $("#Name1").val(tname);
    $("#Remark1").val(tremark);
  }
</script>
</body>
</html>
